<template>
  <div>
    <el-col>
      <el-select
        v-model="value_2"
        placeholder="请选择模块"
        @change="Click_Ech_2"
        class="select_2"
        style="width: 25%"
      >
        <el-option
          v-for="item in options_2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        class="select_1"
        v-model="time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="Time"
      >
      </el-date-picker>
    </el-col>

    <div id="main" :style="myChartStyle"></div>
    <div id="main2" :style="myChartStyle2"></div>
    <div id="mychart3" :style="myChartStyle3"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, toRaw, onMounted, onBeforeMount } from "vue";
import apiService from "@/services/apiService";
import { conversionUtcDate, base64ToExcelAndDownload } from "@/utils/auth";
import { v4 as uuidv4 } from "uuid";
import { ElMessageBox } from "element-plus";
import { store } from "@/store";

//echars样式
const myChartStyle = ref<any>({ float: "left", width: "50%", height: "300px" });
const myChartStyle2 = ref<any>({
  float: "left",
  width: "50%",
  height: "300px"
});
const myChartStyle3 = ref<any>({
  float: "left",
  width: "50%",
  height: "300px"
});
const xData = ref<any>(["0~14", "15~17", "18~35", "36~49", "50~64", "65-"]);
const xData_2 = ref<any>(["男", "女"]);
const yData = ref<any>([]);
//初始化函数
const initEcharts = () => {
  // 绘制图表
  const option = {
    grid: {
      top: "30%", // 设置上边距为 20%
      left: "8%", // 设置左边距为 3%
      right: "4%", // 设置右边距为 4%
      bottom: "3%", // 设置下边距为 3%
      containLabel: true
    },
    title: {
      text: "访问人数"
    },
    tooltip: {},
    xAxis: {
      data: xData.value,
      axisTick: {
        // x轴刻度线
        show: false
      }
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: "dashed"
        }
      }
    },
    // legend: {
    //   data: ["人数"],
    //   top: "15%",
    //   right: "0%"
    // },
    series: [
      {
        name: "数据量",
        type: "bar",
        data: yData.value,
        barWidth: "35%",
        label: {
          // 柱状图上方文本标签，默认展示数值信息
          show: true,
          position: "top"
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0], // 柱体圆角
          color: "#37DBFF"
        }
      }
    ]
  };

  const myChart = echarts.init(document.getElementById("main"));
  myChart.setOption(option);
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
//图2
const initEcharts2 = () => {
  // 绘制图表
  const option = {
    grid: {
      top: "30%", // 设置上边距为 20%
      left: "10%", // 设置左边距为 3%
      right: "0%", // 设置右边距为 4%
      bottom: "3%", // 设置下边距为 3%
      containLabel: true
    },
    // title: {
    //   text: "访问人数"
    // },
    tooltip: {},
    xAxis: {
      data: ["男", "女"],
      axisTick: {
        // x轴刻度线
        show: false
      }
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: "dashed"
        }
      }
    },
    // legend: {
    //   data: ["人数"],
    //   top: "15%",
    //   right: "0%"
    // },
    series: [
      {
        name: "数据量",
        type: "bar",
        data: initEcharts2ydata.value,
        barWidth: "35%",
        label: {
          // 柱状图上方文本标签，默认展示数值信息
          show: true,
          right: "15%"
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0], // 柱体圆角
          color: function (params) {
            // 自定义颜色
            if (params.name === "女") {
              return "pink"; // 将“女”的柱子颜色设置为粉色
            } else {
              return "#37DBFF"; // 其他柱子颜色为天蓝色
            }
          }
        }
      }
    ]
  };

  const myChart = echarts.init(document.getElementById("main2"));
  myChart.setOption(option);
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
const initEcharts3X = ref<any>([]);
const initEcharts3SY = ref<any>([]);
const initEcharts3MY = ref<any>([]);
const initEcharts3GY = ref<any>([]);
//柱图3
const initEcharts3 = () => {
  // 基本柱状图
  const option = {
    grid: {
      top: "30%", // 设置上边距为 20%
      left: "8%", // 设置左边距为 3%
      right: "4%", // 设置右边距为 4%
      bottom: "3%", // 设置下边距为 3%
      containLabel: true
    },
    title: {
      text: "检测方式"
    },
    xAxis: {
      data: initEcharts3X.value,
      axisTick: {
        // x轴刻度线
        show: false
      },
      axisLabel: {
        //x轴文字的配置
        show: true,
        interval: 0 //使x轴文字显示全
      }
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: "dashed"
        }
      }
    },
    legend: {
      data: ["总数", "男", "女"],
      top: "15%",
      right: "0%"
    },
    series: [
      {
        type: "bar", //形状为柱状图
        data: initEcharts3SY.value,
        name: "总数",
        barWidth: "25%",
        label: {
          // 柱状图上方文本标签，默认展示数值信息
          show: true,
          position: "top"
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0] // 柱体圆角
        }
      },
      {
        type: "bar", //形状为柱状图
        data: initEcharts3MY.value,
        name: "男",
        barWidth: "25%",
        label: {
          // 柱状图上方文本标签，默认展示数值信息
          show: true,
          position: "top"
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0], // 柱体圆角
          color: "#37DBFF"
        }
      },
      {
        type: "bar", //形状为柱状图
        data: initEcharts3GY.value,
        name: "女", // legend属性
        barWidth: "25%",
        label: {
          // 柱状图上方文本标签，默认展示数值信息
          show: true,
          position: "top"
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0], // 柱体圆角
          color: "#FFC0CB"
        }
      }
    ]
  };
  const myChart = echarts.init(document.getElementById("mychart3"));
  myChart.setOption(option);
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
const begintime = ref<any>("2023-09-30T00:30:00Z");
const endtime = ref<any>("");
const time = ref<any>("");
const initEcharts2ydata = ref<any>([]);
const renderChartdata = ref<any>([]);
const moduleid = ref<any>(""); //模块ID
const options_2 = ref<any>([
  // {
  //   label: "艾滋病咨询模块",
  //   value: "1"
  // },
  {
    label: "风险评估模块",
    value: "2"
  },
  {
    label: "预约检测模块",
    value: "3"
  },
  {
    label: "暴露后预防模块",
    value: "4"
  }
]);
const value_2 = ref<any>("");
const Click_Ech_2 = value => {
  moduleid.value = value;
  console.log(moduleid.value);
  GetDate_1();
};
const GetDate_1 = () => {
  let one = 0;
  let two = 0;
  let three = 0;
  let four = 0;
  let five = 0;
  let six = 0;
  let girlcount = 0;
  let mancount = 0;
  yData.value = [];
  initEcharts2ydata.value = [];
  const params = JSON.stringify({
    msgid: "StatisticsVisitByModuleID",
    token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
    seq: uuidv4(),
    body: {
      begintime: begintime.value, //开始时间
      endtime: endtime.value, //结束时间
      moduleid: moduleid.value //模块ID
    }
  });
  apiService.post("", params).then((res: any) => {
    console.log(res.data.body);
    res.data.body.visits.forEach(item => {
      //   console.log(item.agebrackets);
      girlcount += item.girlcount;
      mancount += item.mancount;
      renderChartdata.value.push({
        value: item.girlcount + item.mancount,
        name: item.name
      });
      // "0~14", "15~17", "18~35", "36~49", "50~64", "65~120"
      item.agebrackets.forEach(v => {
        if (v.agebracket == "0~14") {
          one += v.girlcount + v.mancount;
        } else if (v.agebracket == "15~17") {
          two += v.girlcount + v.mancount;
        } else if (v.agebracket == "18~35") {
          three += v.girlcount + v.mancount;
        } else if (v.agebracket == "36~49") {
          four += v.girlcount + v.mancount;
        } else if (v.agebracket == "50~64") {
          five += v.girlcount + v.mancount;
        } else if (v.agebracket == "65~120") {
          six += v.girlcount + v.mancount;
        }
      });
    });
    // console.log(this.renderChartdata);
    yData.value.push(one, two, three, four, five, six);

    // console.log(this.renderChartdata);
    initEcharts2ydata.value.push(mancount, girlcount);
    // this.renderChar
    initEcharts();
    initEcharts2();
  });
};
const GetDate_5 = () => {
  initEcharts3X.value = [];

  (initEcharts3SY.value = []),
    (initEcharts3MY.value = []),
    (initEcharts3GY.value = []);
  const params = JSON.stringify({
    msgid: "StatisticsSearchResult",
    token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
    seq: uuidv4(),
    body: {
      begintime: begintime.value, //开始时间
      endtime: endtime.value, //结束时间
      statisticstype: "yyjc" //统计类型
    }
  });
  apiService.post("", params).then((res: any) => {
    // console.log(res);
    res.data.body.searchResults.forEach(item => {
      initEcharts3X.value.push(item.content);
      initEcharts3SY.value.push(item.girlcount + item.mancount);
      initEcharts3GY.value.push(item.girlcount);
      initEcharts3MY.value.push(item.mancount);
    });
    // console.log(this.initEcharts3X);
    initEcharts3();
  });
};
const Time = () => {
  // console.log(time.value);
  begintime.value = time.value[0];
  endtime.value = time.value[1];
  console.log(begintime.value, endtime.value);
  GetDate_1();
  GetDate_5();
};
onMounted(() => {
  initEcharts();
  initEcharts2();
  initEcharts3();
  console.log(store.state.value);
});
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Liuyan"
});
</script>

<style lang="scss" scoped>
#main {
  width: "30%";
  height: "300px";
}
</style>
